
<template>
  <div id="team">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="updateTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="请输入队伍名称"
            :rules="[{ required: true, message: '请输入队伍名称' }]"
        />
        <van-field
            v-model="updateTeamData.description"
            rows="1"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />
        <van-field
            v-model="updateTeamData.expireTime"
            is-link
            readonly
            name="expireTime"
            label="过期时间"
            placeholder="点击选择过期时间"
            @click="showCalendar = true"
        />
        <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />

        <van-field name="status" label="队伍状态">
          <template #input>
            <van-radio-group v-model="updateTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
            v-if="+updateTeamData.status === 2"
            v-model="updateTeamData.password"
            type="password"
            name="password"
            label="队伍密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import request from "../../plugins/request.ts";
import router from "../../router";
import {useRoute} from "vue-router";
const route = useRoute();

// 需要用户填写的表单字段
const updateTeamData = ref({})
const teamId = route.query.teamId;
onMounted(async () => {
  if (+teamId <= 0) {
    showFailToast("队伍加载失败");
  }
  const result = await request.get("/team/select", {
    params: {
      id: teamId
    }
  });
  if (result?.data.code === 200 && result.data.data) {
    result.data.data.status = result.data.data.status + '';
    updateTeamData.value = result.data.data;
  }
});
const onSubmit = async () => {
  const postData = {
    ...updateTeamData.value,
    status: Number(updateTeamData.value.status)
  }
  const result = await request.post("/team/update", postData);
  if (result?.data.code === 200 && result.data.data) {
    router.push({
      path: "/team",
      replace: true
    })
    showSuccessToast("队伍更新成功");
  }else {
    showFailToast("队伍更新失败");
  }
}

// 控制过期时间选择
const showCalendar = ref(false);
const onConfirm = (date: any) => {
  updateTeamData.value.expireTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  showCalendar.value = false;
};
</script>

<style scoped>

</style>